<template>
    <div>
        <div class="btn">
            <el-button type="primary" @click="addCategory">新建分类</el-button>
        </div>

        <!--表格开始-->
        <el-table :data="tableData" v-loading="loading" style="width: 100%;margin-top: 15px;" :header-cell-style="{background:'#eef1f6',color:'#606266'}">
            <el-table-column label="分类名称">
                <template slot-scope="scope">
                    <span style="cursor: pointer" v-show="scope.row.is_show" @dblclick="editCategoryName(scope.$index, scope.row)">{{ scope.row.name }}</span>
                    <el-input v-model="scope.row.name" v-show="!scope.row.is_show" @keyup.enter.native="$event.target.blur" @blur="makeSure(scope.$index, scope.row)" :ref="'input' + scope.row.id"></el-input>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="180">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            type="danger"
                            @click="handleDelete(scope.$index, scope.row)" disabled>删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!--分页-->
        <Pagination @handleClickPage="currentPage" :total="total - 0"></Pagination>

        <!--新建分类的dialog-->
        <el-dialog
                :visible.sync="dialogAdd"
                width="50%"
                @close="dialogAddClose">
            <!--这里的插槽会替换title显示的内容-->
                    <div slot="title" class="header-title">
                        <p class="title-name">创建分类</p>
                        <p class="title-info">自定义分类名称</p>
                    </div>
            <el-form :model="addForm" :rules="addRules" ref="addForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="分类名称" prop="name">
                    <el-input v-model="addForm.name" placeholder="请定义分类名称"  style="width: 204px"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="dialogAddSure">保 存</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    import Pagination from '../../components/pagination'
    import { giftSortList, giftSortEdit, giftSortAdd, giftSortDel } from '../../api/warehouseApi'
    export default {
        name: 'Category',
        data () {
            return {
                tableData: [],
                loading: true,
                page: 1,
                dialogAdd: false,
                addForm: {
                    name: ''
                },
                addRules: {
                    name: [
                        { required: true, message: '请输入分类名称', trigger: 'blur' },
                    ],
                },
                categoryName: '',
                total: '',
            }
        },
        created() {
            this._giftSortList(this.page) // 获取礼品分类列表
        },
        methods: {
            async _giftSortList (page) {
                let params = {p: page, length: 10}
                const res = await giftSortList(params)
                if (res.code === 0) {
                    console.log(res)
                    res.data.list.forEach( row => {
                        row.is_show = true
                    })
                    this.tableData = res.data.list
                    this.total = res.data.total
                    this.loading = false
                }
            },
            addCategory () {
                this.dialogAdd = true
            },
            // 新建分类dialog 关闭事件
            dialogAddClose() {
                this.$refs.addForm.resetFields()
            },
            // 编辑分类名称
            editCategoryName (index, row) {
                console.log(index, row)
                this.categoryName = row.name
                row.is_show = false
                this.$nextTick(() => {
                    // this.$refs.input.$el.children[0].focus()
                    setTimeout(() => {
                        // this.$refs['input' + row.id].$el.children[0].focus()
                        this.$refs['input' + row.id].$el.querySelector('input').focus()
                    }, 100)
                })
            },
            // 修改合同名称
            async makeSure(index, row) {
                // console.log(row)
                row.is_show = true
                if (this.categoryName === row.name) return
                if (row.name.trim().length === 0) return row.name = this.categoryName
                let params = {name: row.name, id: row.id}
                const res = await giftSortEdit(params)
                if (res.code === 0) {
                    console.log(res)
                    this.$message.success('修改成功')
                    this._giftSortList(this.page) // 获取礼品分类列表
                }
            },
            // 添加商品分类
            dialogAddSure () {
                this.$refs.addForm.validate( async valid => {
                    if (!valid) return false
                    const res = await giftSortAdd(this.addForm)
                    if (res.code === 0) {
                        console.log(res)
                        this.$message.success('添加成功!')
                        this._giftSortList(this.page) // 获取礼品分类列表
                        this.dialogAdd = false
                    }
                })
            },
            // 删除
            handleDelete(index, row) {
                console.log(index, row)
                let arr = []
                arr.push(row.id)
                let params = {ids: arr, delete: 1}
                this.$confirm('此操作将永久删除该分类, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(async () => {
                    const res = await giftSortDel(params)
                    if (res.code === 0) {
                        this.$message.success('删除成功!')
                        this._giftSortList(this.page) // 获取礼品分类列表
                    }
                }).catch(() => {
                    this.$message.info('已取消删除')
                })
            },
            // 分页的 当前点击的页数
            currentPage(newPage) {
                console.log(`当前页: ${newPage}`)
                this.page = newPage
                this._giftSortList(this.page) // 获取礼品分类列表
            },
        },
        components: {
            Pagination
        },
    }
</script>

<style scoped lang="scss">
    .btn {
        text-align: right;
    }
    .header-title {
        .title-name {
            font-size: 18px;
            color: #333;
            font-weight: 600;
            margin-bottom: 0;
        }
        .title-info {
            font-size: 11px;
            color: #7d7d7d;
            margin-bottom: 0;
            margin-top: 4px;
        }
    }
</style>
